/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-07-03 14:51:40
 * @Description: 首页-应用工具-APP评论信息检索-详情页
 *               新窗口打开的独立页面
 */
import React from "react";
import { Layout } from "antd";
import { NavLink } from "react-router-dom";
import "./style.scss";
import { AsyncPage } from "@/utils/util";
import RouteMenu from "@/components/routeMenu";

const APPIRComprehensive = AsyncPage(() => import("./Comprehensive"));
const APPIRRelationObj = AsyncPage(() => import("./RelationObj"));
const APPIRUseCrowd = AsyncPage(() => import("./UseCrowd"));
const APPIRWarning = AsyncPage(() => import("./Warning"));
const APPIRComment = AsyncPage(() => import("./Comment"));
const APPIRChangeLog = AsyncPage(() => import("./ChangeLog"));

const { Sider } = Layout;

function AppInfoRetrievalDetails() {
    const sideList = [
        {
            name: "综合信息",
            path: "/main/appInfoRetrievalDetails/comprehensive",
            component: APPIRComprehensive,
            icon: "comprehensive"
        },
        {
            name: "关联对象",
            path: "/main/appInfoRetrievalDetails/relationObj",
            component: APPIRRelationObj,
            icon: "relationObj"
        },
        {
            name: "使用人群",
            path: "/main/appInfoRetrievalDetails/useCrowd",
            component: APPIRUseCrowd,
            icon: "useCrowd"
        },
        { name: "预警中心", path: "/main/appInfoRetrievalDetails/warning", component: APPIRWarning, icon: "warning" },
        { name: "评论信息", path: "/main/appInfoRetrievalDetails/comment", component: APPIRComment, icon: "comment" },
        {
            name: "变更记录",
            path: "/main/appInfoRetrievalDetails/changeLog",
            component: APPIRChangeLog,
            icon: "changeLog"
        }
    ];

    return (
        <Layout className="app-info-retrieval-details">
            <Sider className="left-side">
                <ul className="side-list">
                    {sideList.length > 0 &&
                        sideList.map((item, index) => {
                            return (
                                <li key={index} className="side-list-item">
                                    <NavLink to={item.path}>
                                        <i className={`item-icon ${item.icon}`} />
                                        <span>{item.name}</span>
                                        <i className="allow-icon" />
                                    </NavLink>
                                </li>
                            );
                        })}
                </ul>
            </Sider>
            <Layout>
                <div className="APPIR-details">
                    <div className="top">
                        <div className="left">
                            <img src="https://dummyimage.com/50x60" alt="" className="logo" />
                            <div className="name">中青理财</div>
                            <span className="tip">APP类型：金融理财</span>
                            <span className="tip">最近更新日期：2018-12-12</span>
                            <span className="tip">发现日期：2018-12-12</span>
                        </div>
                        <div className="right">
                            <span className="btn active">下载报告</span>
                            <span className="btn">备注信息</span>
                            <span className="btn">加入关注</span>
                        </div>
                    </div>
                    <RouteMenu data={sideList} />
                </div>
            </Layout>
        </Layout>
    );
}

export default AppInfoRetrievalDetails;
